<template>
  <div>
    <h2>ValidateForm 验证表单 和 ValidateInput 验证 Input 组件</h2>
    <p>具有数据收集、校验和提交功能的表单。支持多种预设规则，自定义规则等。详见代码。</p>
    <h4>演示</h4>
    <validate-form @form-submit="onFormSubmit">
      <div class="mb-3">
        <label class="form-label">邮箱地址</label>
        <validate-input
          :rules="emailRules" v-model="formData.email"
          placeholder="请输入邮箱地址"
          type="text"
        />
      </div>
      <div class="mb-3">
        <label class="form-label">昵称</label>
        <validate-input
          :rules="nameRules" v-model="formData.nickName"
          placeholder="请输入昵称"
          type="text"
        />
      </div>
      <div class="mb-3">
        <label class="form-label">密码</label>
        <validate-input
          type="password"
          placeholder="请输入密码"
          :rules="passwordRules"
          v-model="formData.password"
        />
      </div>
      <div class="mb-3">
        <label class="form-label">重复密码</label>
        <validate-input
          type="password"
          placeholder="请再次密码"
          :rules="repeatPasswordRules"
          v-model="formData.repeatPassword"
        />
      </div>
      <template #submit>
        <button type="submit" class="btn btn-primary btn-block btn-large">注册新用户</button>
      </template>
    </validate-form>
    <h4 class="mt-4">在 vue template 中添加结构代码</h4>
    <pre>{{html}}</pre>
    <h4 class="mt-4">在 setup 方法中添加数据</h4>
    <pre>{{htmlSetup}}</pre>
    <h4>validate-form 属性和事件</h4>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">属性或事件</th>
          <th scope="col">类型</th>
          <th scope="col">默认</th>
          <th scope="col">说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">form-submit</th>
          <td>事件</td>
          <td>-</td>
          <td>回调参数 (result: boolean) => void, result 代表是否通过了验证</td>
        </tr>
      </tbody>
    </table>
    <h4>validate-input 属性和事件</h4>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">属性或事件</th>
          <th scope="col">类型</th>
          <th scope="col">默认</th>
          <th scope="col">说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">rules</th>
          <td>array</td>
          <td>-</td>
          <td>单个输入框的验证类型，可以传入包含特定对象的数组, 详情可见上面示例代码</td>
        </tr>
        <tr>
          <th scope="row">tag</th>
          <td>input | textarea</td>
          <td>input</td>
          <td>根节点类型</td>
        </tr>
        <tr>
          <th scope="row">v-model</th>
          <td>string</td>
          <td>-</td>
          <td>支持 v-model，请使用响应式数据</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import ValidateInput from './../ValidateInput.vue'
import ValidateForm from './../ValidateForm.vue'
export default defineComponent({
  name: 'form-details',
  components: {
    ValidateInput,
    ValidateForm
  },
  setup () {
    const formData = reactive({
      email: '',
      nickName: '',
      password: '',
      repeatPassword: ''
    })
    const emailRules = [
      // 多种规则
      { type: 'required', message: '电子邮箱地址不能为空' },
      { type: 'email', message: '请输入正确的电子邮箱格式' }
    ]
    const nameRules = [
      { type: 'required', message: '昵称不能为空' }
    ]
    const passwordRules = [
      { type: 'required', message: '密码不能为空' },
      // 范围规则
      { type: 'range', min: { message: '你的密码至少包括六位，不能含有空格', length: 6 } }
    ]
    const repeatPasswordRules = [
      { type: 'required', message: '重复密码不能为空' },
      { type: 'range', min: { message: '你的密码至少包括六位，不能含有空格', length: 6 } },
      // 自定义规则
      {
        type: 'custom',
        validator: () => {
          return formData.password === formData.repeatPassword
        },
        message: '密码不相同'
      }
    ]
    const onFormSubmit = (result: boolean) => {
      if (result) {
        alert('🎉 通过啦')
      } else {
        alert('😢 没通过')
      }
    }
    const html = `
      // html template
      <validate-form @form-submit="onFormSubmit">
        <div class="mb-3">
          <label class="form-label">邮箱地址</label>
          <validate-input
            :rules="emailRules" v-model="formData.email"
            placeholder="请输入邮箱地址"
            type="text"
          />
        </div>
        <div class="mb-3">
          <label class="form-label">昵称</label>
          <validate-input
            :rules="nameRules" v-model="formData.nickName"
            placeholder="请输入昵称"
            type="text"
          />
        </div>
        <div class="mb-3">
          <label class="form-label">密码</label>
          <validate-input
            type="password"
            placeholder="请输入密码"
            :rules="passwordRules"
            v-model="formData.password"
          />
        </div>
        <div class="mb-3">
          <label class="form-label">重复密码</label>
          <validate-input
            type="password"
            placeholder="请再次密码"
            :rules="repeatPasswordRules"
            v-model="formData.repeatPassword"
          />
        </div>
        <template #submit>
          <button type="submit" class="btn btn-primary btn-block btn-large">注册新用户</button>
        </template>
      </validate-form>
    `
    const htmlSetup = `
      // in script setup
      setup () {
        const formData = reactive({
          email: '',
          nickName: '',
          password: '',
          repeatPassword: ''
        })
        const emailRules = [
          // 多种规则
          { type: 'required', message: '电子邮箱地址不能为空' },
          { type: 'email', message: '请输入正确的电子邮箱格式' }
        ]
        const nameRules = [
          { type: 'required', message: '昵称不能为空' }
        ]
        const passwordRules = [
          { type: 'required', message: '密码不能为空' },
          // 范围规则
          { type: 'range', min: { message: '你的密码至少包括六位，不能含有空格', length: 6 } }
        ]
        const repeatPasswordRules = [
          { type: 'required', message: '重复密码不能为空' },
          { type: 'range', min: { message: '你的密码至少包括六位，不能含有空格', length: 6 } },
          // 自定义规则
          {
            type: 'custom',
            validator: () => {
              return formData.password === formData.repeatPassword
            },
            message: '密码不相同'
          }
        ]
        const onFormSubmit = (result) => {
          if (result) {
            alert('🎉 通过啦')
          } else {
            alert('😢 没通过')
          }
        }
        return {
          emailRules,
          nameRules,
          passwordRules,
          repeatPasswordRules,
          onFormSubmit,
          formData
        }
      },
    `
    return {
      emailRules,
      nameRules,
      passwordRules,
      repeatPasswordRules,
      onFormSubmit,
      formData,
      html,
      htmlSetup
    }
  }
})
</script>

<style scoped>
pre {
  background-color: #fdf6e3;
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}
</style>
